<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        formItemWidth="120px"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <BasicTable
        :showActionClo="false"
        :showSelectCol="false"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :tableHeight="480"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      />
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import basePage from '@/mixins/commodity/basePage';
import { FORM_ITEMS, TABLE_COLUMNS } from './constants';
import { setAuthBtnId } from '@/utils/bizUtils';
import { queryDistributionPriceListService } from '@/api/finance/salePriceManage/distributionPriceChangeRecord';
export default {
  mixins: [basePage],
  components: {
    BasicForm,
    BasicTable,
  },
  data () {
    return {
      formItemList: FORM_ITEMS,
      formData: {
        skuNo: '',
        provinceName: '',
        recordNo: '',
        changeType: '',
        changeTime: []
      },
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false
      }
    }
  },
  methods: {
    // 获取表单查询入参
    getSearchFormParams () {
      const [startTime = '', endTime = ''] = this.formData.changeTime ?? [];
      const formData = {
        startTime,
        endTime,
        ..._.omit(this.formData, 'changeTime')
      }
      return {
        ...this.paginationParams,
        ...formData
      }
    },
    // 获取表格数据
    async getTableData () {
      if (!this.formData.skuNo) {
        return this.$message.warning('请填写SKU编码后再查询');
      }
      setAuthBtnId();
      const data = this.getSearchFormParams();
      const retData = await queryDistributionPriceListService(
        data,
        state => { this.tableInfo.loading = state }
      );
      if (retData) {
        this.tableInfo.list = retData.results;
        this.pagination.totalNum = retData.totalNum;
      }
    }
  }
}
</script>
